<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
  <head>
    <title>药店选择</title>
    <jsp:include page="header.jsp"></jsp:include>
  </head>
	<style>
		.weui-content ul {
			width: 100%;
		}
		.weui-content ul li {
			width: 100%;
			background-color: #fff;
			border-top:#eee solid 1px;
		}
		.weui-content ul li div {
			width: 100%;
			padding-left: 12px;
			font-size: .7rem;
		}
		.my-row {
			width: 100%;
			background-color: #fff;
			padding-left: 12px;
			font-size: .9rem;
		}
		.my-so {
			color: #000;
			font-size: 14px;
			margin-left: 5px;
			padding-top: 3px;
	}
	</style>
  <body ontouchstart>
    <div class="weui-search-bar" id="searchBar">
      <form class="weui-search-bar__form" action="#">
        <div class="weui-search-bar__box">
          <i class="weui-icon-search"></i>
          <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
          <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
        </div>
        <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
          <i class="weui-icon-search"></i>
          <span>搜索</span>
        </label>
      </form>
      <a href="javascript:" class="my-so" id="searchCancel">搜索</a>
    </div>
    <div class="weui-content">
    	<c:choose>
		<c:when test="${not empty list}">
			<ul>
			<c:forEach var="app" items="${list}" varStatus="st">
	      		<li class="my-li" id="${app.id}">
	      		<div>${app.houseName}</div>
	      		<div>${app.houseAddress}</div>
	      		</li>
	      		</c:forEach>
    		</div>
		</c:when>
	<c:otherwise>
		<div class="my-row">没有药店 <a href="javascript:history.go(-1);">返回</a></div>
	</c:otherwise>
	</c:choose>
	<input type="hidden" name="id" value="${orderId}">
    </div>
    <jsp:include page="foot.jsp"></jsp:include>
    <script type="text/javascript">
    $('.my-li').click(function(){
    	var  id =$("input[name='id']").val();
    	var yaoId =this.id;
    	var url ="/phone/addOrderYaodian?orderYuliu="+yaoId+"&id="+id;
    	window.location.href=url;
    });
    /* $('#searchInput').change(function(){
    	var a = this.value;
		$('.weui-content').html();
		var orderId ='${orderId}';
		if(a!=null&&a.length>0){
			getJson(a,orderId);
		}	
    }); */
    $('#searchCancel').click(function(){
		 var name =$('#searchInput').val();
		 if(''!=name){
			 $('.weui-content').html();
			 var orderId ='${orderId}';
			 getJson(name,orderId);
		 }
	 });
    function getJson(name,orderId){
		$.post('/phone/yaodianAjax',{name:name,orderId:orderId},function(data){
			var str='';
			if(data!=null&&data!=""){
				for(var o in data){
					str+='<ul>';
					str+='<li class="my-li" id="'+data[o].id+'">'+
					'<div>'+data[o].houseName+'</div>'+
					'<div>'+data[o].houseAddress+'</div>'+
						'</li>';
						str+='</ul>';
				}
			}else{
				str+='<div class="my-row">没有药店 <a href="javascript:history.go(-1);">返回</a></div>';
			}
			$('.weui-content').html(str);
		});
	}
    </script>
  </body>
</html>